<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜大小</title>
    <style>
    body{
        width:250px;
        margin: 30px auto;
        border: 1px solid □#666; 
        border-radius:10px; padding:10px;
}

    </style>
</head>
<body>
    <div id="guess">
        <h1>猜大小游戏</h1>
        {{info}}
        <br>
        <input v-model="num1" v-show="input_status" :disabled="isdisabled">
        <button @click="playGame" v-show="hidden_status">
            {{message}}
        </button>
        <ul>
            <li v-for="info_ in info_list">
                第{{info_.id}}次猜数字,输入了<span>「{{info_.num}}」</span>,提示:{{info_.text}}
            </li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        var item = 0;
var guess_num = new Vue({
        el: "#guess",
        data: {
            num: '',
            num1: '',
            info: "请按「开始游戏」开始猜数字游戏",
            hidden_status: true,
            input_status: false,
            message: '开始',
            isdisabled: false,
            info_list: []
        },
        watch: {
            num1: function (newNum1, oldNum1) {
                this.info = '开始比较';
                guess_num.changed_num()
            }
        },
        created: function () {
            this.num = Math.floor(Math.random() * 100 + 1);
        },
        methods: {
            changed_num: function () {
                var regNeg = /[0-9]*/;
                let flag = true;
                if (this.num1 == this.num) {
                    this.info = '你猜对了!';
                    this.hidden_status = true;
                    this.isdisabled = true;
                } else if (this.num1 == '') {
                    flag = false;
                    this.info = '请输入一个小于100整数';
                } else if (this.num1 > 100) {
                    this.info = '请输入一个小于100的值';
                } else if (this.num1 > this.num) {
                    this.info = '你输入的数字比要猜的数字大';
                } else if (!regNeg.test(self.num1)) {
                    this.info = '请输入一个整数数字';
                } else {
                    this.info = '你输入的数字比要猜的数字小';
                }
                this.info_list.forEach(item => {
                    if (this.num1 == item.num) {
                        flag = false
                    }
                });
                if (flag) {
                    item++;
                    this.info_list.push({id: item, num: this.num1, text: this.info});
                }

            },
            playGame: function () {
                this.message = "重新开始";
                this.hidden_status = false;
                this.input_status = true;
                this.isdisabled = false;
                this.num1 = '';
                item = 0;
                self.info = '请输入数字';
                this.info_list = [];
                this.num = Math.floor(Math.random() * 100 + 1);
            }
        },
    })
;
    </script>
</body>
</html>